<template>
 <div>
    <div class="back-nav">
        <van-icon name="arrow-left" @click="onClickLeft"/>
    </div>  
  <div class="register-box">
    <div class="title">欢迎注册</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          clearable
          placeholder="请填写邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }, {validator, message: '邮箱格式不正确'}]"
        />
        <van-field
          v-model="code"
          name="code"
          clearable
          label="验证码"
          placeholder="请填写验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
             <span v-if="!showCount" @click="getVerificationCode">{{text}}</span>
             <span v-else>{{times}}秒</span>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 50px 30px 80px 30px">
        <van-button round block type="primary" color="#28AE61" :loading="isLoading" loading-text="加 载 中..." native-type="submit">
          确&nbsp;&nbsp;&nbsp;&nbsp;定
        </van-button>
         <van-divider>
           <span style="color: #4099FF;font-size: 13px;" @click="login">
             已有账号去登录
            </span>
          </van-divider>
      </div>
    </van-form>
  </div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Toast } from "vant";
import { sendMailer, toVerifyEmail } from  '@/api/common'
import { useRouter } from "vue-router";

const emit = defineEmits(['changeVerifyPass'])

const router = useRouter();
const isLoading = ref<boolean>(false)
const email = ref<string>("");
const code = ref<string>("");
const showCount = ref<boolean>(false)
const text = ref<string>("获取验证码")
const times = ref<number>(59);
const clicked = ref<boolean>(false)
const validator = (val: any) => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)

// 获取邮箱验证码
const getVerificationCode = async () => {
    if(clicked.value) {
      return
    }
    clicked.value = true
    if(!email.value) {
        return
    }
    if(!validator(email.value)) {
      Toast('邮箱格式不正确')
      return    
    }
    const rsp = await sendMailer({ email: email.value }, { loading: true })
    if(rsp.code === 0) {
        times.value = 59
        showCount.value = true
        Toast.success(rsp.msg)
        const interval = setInterval(() => {
            times.value --
            if(times.value < 1) {
                showCount.value = false
                text.value = '重新获取'
                clearInterval(interval)
            }
        }, 1000)
    }
    clicked.value = false
};

const login = () => {
  router.push('/login')
}

const onClickLeft = () => {
  router.go(-1)
}

const onSubmit = async (data: any) => {
  // isLoading.value = true
  data.is_reg = 1
  const info = data
  const rsp = await toVerifyEmail(info)
  isLoading.value = false
  if(rsp.code === 0) {
    emit('changeVerifyPass', email.value)  
    email.value = ''
    code.value = ''
    showCount.value = false
    text.value = '获取验证码'
  }
};

</script>
<style lang="less" scoped>
.back-nav {
  padding: 20px 0 0 10px;
}
.register-box {
  padding: 60px 20px;
  .title {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 15px 0 30px 0;
  }
}
</style>
